<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
</head>

<body>
    <div id="app">
        <h1>1.监听事件</h1>
        <button v-on:click="counter += 1">增加 1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>2.方法事件处理器</h1>
        <button v-on:click="greet">Greet</button>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>3.内联处理器方法</h1>
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
        <p>有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：</p>
        <p>v-on:click="warn('Form cannot be submitted yet.', $event)"</p>
        <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>4.事件修饰符</h1>
        <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
        <input v-on:keyup.13="submit">
        <!-- 同上 -->
        <input v-on:keyup.enter="submit">
        <!-- 缩写语法 -->
        <input @keyup.enter="submit">

    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            greet: function() {
                alert('greet');
            },
            say: function(message) {
                alert(message)
            },
            warn: function(message, event) {
                if (event) event.preventDefault()
                alert(message)
            },
            submit: function() {
                alert('submit')
            }
        }
    })
    </script>
</body>

</html>
